<template>
    <image :src="imgUrl||imageSrc" @error="handleLoadError"></image>
</template>

<script>
    export default{
        props:{
            imageSrc:{
                type:String
            },
            cache:{
                type:Boolean,
                default:true,
            },
            cacheTime:{
                type:Number,
            },
            delay:{
                type:Number,
                default: 1
            }
        },
        data(){
            return {
                imgUrl:'',
            }
        },
        computed:{
            useCache(){
                // 判断环境
                let inH5 = false
                // #ifdef H5
                inH5 = true
                // #endif
                // 判断是否使用缓存
                return !inH5&&this.cache
            }
        },
        watch:{
            // #ifndef H5
            imageSrc:{
                handler(src){
                    if(!this.useCache) return;
                    this.handleCache(src)
                },
                immediate:true
            },
            // #endif
        },
        methods:{
            async handleCache(src){
                const sign = 'cached-image';
                const cachedRes = await uni.getStorage({key: sign + src })
                // console.log("cachedRes: " + JSON.stringify(cachedRes));
                const cachedUrl = cachedRes[1]&&cachedRes[1].data;
                if(cachedUrl&&this.cacheTime){
                    // console.log('检查缓存时间为：'+this.cacheTime*24*60+'分钟的图片是否过期');
                    const cachedUrlInfo = await uni.getSavedFileInfo({filePath:cachedUrl})
                    const createTime = cachedUrlInfo[1]&&cachedUrlInfo[1].createTime
                    const expiredTime = createTime + this.cacheTime*24*60*60*1000
                    // console.log(expiredTime,+new Date());
                    if(expiredTime > +new Date()){
                        // console.log('缓存未过期');
                        this.imgUrl = cachedUrl
                        return;
                    }else if(expiredTime){
                        // console.log('缓存已过期');
                        // 删除缓存过期的图片
                        uni.removeSavedFile({filePath:cachedUrl});
                        uni.removeStorage({key: sign + src})
                    }else{
                        // console.log('缓存被清除');
                    }
                }else if(cachedUrl&&!this.cacheTime){
                    // console.log('未设缓存时间');
                    this.imgUrl = cachedUrl;
                    return;
                }
                // console.log('执行缓存文件过程-未缓存过或缓存过期或缓存被清除');
                setTimeout(()=>{
                    // console.log('执行缓存下载');
                    uni.downloadFile({url:src}).then(res=>{
                        // console.log(src);
                        // console.log("res: " + JSON.stringify(res));
                        if(res[1].statusCode==200){
                            // this.imgUrl = res[1].tempFilePath;
                            return uni.saveFile({
                                tempFilePath: res[1].tempFilePath
                            })
                        }else{
                            // this.imgUrl = '';
                            return Promise.reject('下载临时文件失败')
                        }
                    }).then(res=>{
                        // console.log("res: " + JSON.stringify(res));
                        if(res[1]&&!res[0]){
                            return uni.setStorage({
                                key: sign + src,
                                data:res[1].savedFilePath
                            })
                        }
                    }).catch(info=>{
                        // this.imgUrl = '';
                        // console.log("info: " + JSON.stringify(info));
                    })
                },this.delay*60*1000)
            },
            handleLoadError(){
                if(this.imgUrl){
                    // 如果使用缓存地址加载失败的话换回默认源地址
                    this.imgUrl = '';
                }else{
                    // 加载失败图的base64码
                    this.imgUrl = '';
                }
            },
            
        },
    }
</script>

<style>
</style>
